<template>
  <el-card class="fan-list-card">
    <h2>我的粉丝</h2>
    <div v-for="(fan, index) in fans" :key="index" class="fan-item">
      <el-avatar :src="fan.avatar" @click="goToFanProfile(fan.id)"></el-avatar>
      <div class="fan-info">
        <span class="username">{{ fan.nickname }}</span>
        <el-button :icon="Delete" type="danger" class="btu" @click="deleteFan(fan.id)">删除</el-button>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { ref } from 'vue';
import {Delete} from "@element-plus/icons-vue";

// 假设这是从 API 获取的粉丝列表
const fans = ref([
  { id: 1, avatar: 'person_img/002.jpg', nickname: 'Tom' },
  { id: 2, avatar: 'person_img/003.jpg', nickname: 'Luck' },
  { id: 3, avatar: 'person_img/001.jpg', nickname: 'Coco' },
  { id: 4, avatar: 'person_img/002.jpg', nickname: 'Lucy' },
  { id: 5, avatar: 'person_img/003.jpg', nickname: 'Mike' },
  { id: 6, avatar: 'person_img/001.jpg', nickname: 'VAVA' },
  { id: 7, avatar: 'person_img/002.jpg', nickname: 'Angel' },
  // 更多粉丝...
]);

// 假设的方法，用于导航到粉丝的个人中心
function goToFanProfile(fanId) {
  // 在这里实现你的导航逻辑，例如使用 Vue Router
  console.log(`Navigating to fan profile for ID: ${fanId}`);
}

// 假设的方法，用于删除粉丝
function deleteFan(fanId) {
  // 在这里实现你的删除逻辑，例如发送 API 请求
  const index = fans.value.findIndex(fan => fan.id === fanId);
  if (index !== -1) {
    fans.value.splice(index, 1);
    // 可能还需要发送 API 请求来在服务器端删除粉丝
    console.log(`Fan with ID ${fanId} has been deleted.`);
  }
}
</script>
<style scoped>
.fan-list-card {
  width: 101%;
}

.fan-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.fan-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-avatar {
  margin-right: 10px;
}

.username {
  font-weight: bold;
}

.btu {
  /* 自定义删除按钮的样式 */
  background-color: #ec8; /* 你可以更改为你喜欢的颜色 */
  border-color: #ec8;
  color: #fff;
  font-size: 14px; /* 根据需要调整字体大小 */
  padding: 6px 15px; /* 根据需要调整内边距 */
  transition: background-color 0.2s, border-color 0.2s; /* 添加过渡效果 */
}

.btu:hover {
  background-color: #f77d7d; /* 你可以更改为你喜欢的悬停颜色 */
  border-color: #f77d7d;
}
</style>